<div class="decorate-bg" [ngStyle]="tagData.cssStyle | styleFilter">
  <div class="decorate-header" *ngIf="tagData.data.headDiv?.header" >
   
    <p class="item-1" *ngIf="tagData.data.headDiv?.header?.firstText?.label" [ngStyle]="tagData.data.headDiv.header.firstText.cssStyle | styleFilter">{{tagData.data.headDiv.header.firstText.label}}</p>

    <span class="item-2" *ngIf="tagData.data.headDiv?.header?.secondText?.label" [ngStyle]="tagData.data.headDiv.header.secondText.cssStyle | styleFilter">{{tagData.data.headDiv.header.secondText.label}}</span>

    <span class="item-3" *ngIf="tagData.data.headDiv?.header?.thirdText?.label" [ngStyle]="tagData.data.headDiv.header.thirdText.cssStyle | styleFilter">{{tagData.data.headDiv.header.thirdText.label}}</span>

    <span class="item-4" *ngIf="tagData.data.headDiv?.header?.fourthText?.label" [ngStyle]="tagData.data.headDiv.header.fourthText.cssStyle | styleFilter">{{tagData.data.headDiv.header.fourthText.label}}</span>

    <span  class="item-5" *ngIf="tagData.data.headDiv?.header?.fifthText?.label" [ngStyle]="tagData.data.headDiv.header.fifthText.cssStyle | styleFilter">{{tagData.data.headDiv.header.fifthText.label}}</span>

    
    
  </div>

  <ng-container *ngFor="let item of tagData.data.data, let i = index">
    <div class="decorate-item" *ngIf="item.firstRowLeft?.header" [ngClass]="{'last-item': i=== tagData.data.data.length - 1}" appDebounceClick (debounceClick)="checkItem($event,item)">
      
      <p  class="item-1" *ngIf="item.firstRowLeft?.header?.firstText?.label" [ngStyle]="item.firstRowLeft?.header.firstText.cssStyle | styleFilter"><i class="unCheck" [ngClass]="{'checked': item.checked}"></i> <span>{{item.firstRowLeft?.header.firstText.label}}</span></p>
  
      <span class="item-2" *ngIf="item.firstRowLeft?.header?.secondText?.label" [ngStyle]="item.firstRowLeft.header.secondText.cssStyle | styleFilter">{{item.firstRowLeft.header.secondText.label}}</span>
  
      <span class="item-3" *ngIf="item.firstRowLeft?.header?.thirdText?.label" [ngStyle]="item.firstRowLeft.header.thirdText.cssStyle | styleFilter">{{item.firstRowLeft.header.thirdText.label}}</span>
  
      <span class="item-4" *ngIf="item.firstRowLeft?.header?.fourthText?.label" [ngStyle]="item.firstRowLeft.header.fourthText.cssStyle | styleFilter">{{item.firstRowLeft.header.fourthText.label}}</span>
  
      <span class="item-5" *ngIf="item.firstRowLeft?.header?.fifthText?.label" [ngStyle]="item.firstRowLeft.header.fifthText.cssStyle | styleFilter">{{item.firstRowLeft.header.fifthText.label}}</span>
  
      
      
    </div>

  </ng-container>
</div>
